<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
	<!-- 标题栏 -->
	<jsp:include page="header.jsp"></jsp:include>

	<!-- 商品展示 -->
	<div class="col-md-10 col-md-push-1">
		<div class="col-md-12 bg-danger text-left" style="margin-bottom: 10px">
			<div class="col-md-6 text-left">
				<h3>${loginUser.uname}的密码修改</h3>
			</div>
			<div class="col-md-6 text-right">
				<button class="btn btn-lg btn-primary" onclick="goBack()"
					style="height: 56px">返回</button>
			</div>
		</div>
		<div style="height: 630px;">
			<div class="col-md-12 bg-warning text-center" id="cartView">
				<div class="col-md-12 text-center panel" id="view"
					style="margin-top: 10px">
					<!-- 展示操作路径 -->
					<div class="panel-heading text-left">
						<a href="index.jsp">商城首页</a>-><a href="javascript:void(0)">修改个人密码</a>
					</div>
					<!-- 面板主体 -->
					<div class="panel-body">
						<form class="form form-horizontal  col-md-push-1 col-md-10 ">
							<div class="form-group ">
								<div class="col-md-3 text-right">
									<label for="newUname">新昵称：</label>
								</div>
								<div class="col-md-4">
									<input type="text" name="newUname" id="newUname"
										autocomplete="off" placeholder="请输入新昵称"
										value="${loginUser.uname }" onblur="checkNewUname()"
										class="form-control" />
								</div>
								<div class="col-md-5 text-left">
									<span id="newUnameMsg">&nbsp;</span>
								</div>
							</div>
							<div class="form-group col-md-8">
								<button type="button" class="btn btn-md btn-success"
									onclick="updateUname()">保存</button>
								<button type="reset" class="btn btn-md btn-warning">重置</button>
							</div>
						</form>
					</div>
					<!-- 新增按钮 -->
					<div class="panel-footer" style="height: 50px"></div>
				</div>
			</div>
			<div class='col-md-12 bg-warning' style="height: 50px;"></div>
		</div>
	</div>
	<!-- 版权页 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		if ("${loginUser.ucartid}" == "" || "${loginUser.ucartid}" == 0) {
			alert("请登录商城用户账号！");
			location.href = "index.jsp";
		}
	})

	//继续购物
	function goBack() {
		history.go(-1);
	}

	//修改昵称
	function updateUname() {
		if (checkNewUname()) {
			$.ajax({
				url : "user",
				type : "post",
				data : {
					"opr" : "updateUname",
					"uname" : $("#newUname").val()
				},
				dataType : "json",
				success : function(result) {
					if (result.msg == "ok") {
						alert("昵称修改成功");
						location.href = "index.jsp";
					} else if (result.msg == "null") {
						alert("请重新登录！");
						location.href = "index.jsp";
					} else {
						alert(result.msg);
					}
				}
			})
		}
	}

	//检查新昵称格式是否正确
	function checkNewUname() {
		let zz = /^[a-zA-Z0-9\u4e00-\u9fa5]{4,10}$/;
		let unameVal = $("#newUname").val();
		if (zz.test(unameVal)) {
			$("#newUnameMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#newUnameMsg").html(
					"<font color='red'>昵称由字母、数字和汉字组成，长度必须在4-10位之间。</font>");
			return false;
		}
	}
</script>
</html>
